<!--
 * @Author: zhang gen yuan
 * @Date: 2021-09-16 17:08:16
 * @Descripttion: 
-->
<template>
  <div class="task-box">
    <div class="btn">
      <el-button @click="addHandler" type="primary" size="mini">
        <el-icon style="vertical-align: middle">
          <plus />
        </el-icon>
        <span style="vertical-align: middle"> 新增 </span>
      </el-button>
      <div class="table-ref" @click="search">
        <img class="table-ref-icon" src="./../../assets/r.png" alt="" />
      </div>
    </div>
    <el-table
      :data="data.tableData"
      style="width: 100%"
      v-loading="$_loading"
      row-key="id"
      :load="load"
      lazy
      :tree-props="{ children: 'children' }"
      :key="Math.random()"
      @cell-click="cellClick"
    >
      <template v-for="item in columns" :key="item.prop">
        <el-table-column
          v-if="!item.type"
          :label="item.label"
          :prop="item.prop"
        >
        </el-table-column>
        <template v-else>
          <el-table-column
            v-if="item.prop === 'title'"
            label="任务名称"
            prop="title"
          >
            <template #default="scope">
              <span v-if="!scope.row.show">{{ scope.row.title }}</span>
              <el-input
                v-else
                placeholder="请输入项目名称"
                v-model="changeRow.title"
                style="margin-left: 20px"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.prop === 'projectId'"
            label="所属项目"
            prop="projectId"
          >
            <template #default="scope">
              <span v-if="!scope.row.show">{{
                projectFilter(scope.row.projectId, selectList.projectAll)
              }}</span>
              <el-select
                v-else
                v-model="changeRow.projectId"
                placeholder="请选择所属项目"
              >
                <el-option
                  v-for="item in selectList.projectAll"
                  :key="item.id"
                  :label="item.projectName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.prop === 'predictStart'"
            label="预期开始时间"
            prop="predictStart"
          >
            <template #default="scope">
              <span v-if="!scope.row.show">{{ scope.row.predictStart }}</span>
              <el-date-picker
                v-else
                v-model="changeRow.predictStart"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="datetime"
                placeholder="选择日期"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.prop === 'predictEnd'"
            label="预期结束时间"
            prop="predictEnd"
          >
            <template #default="scope">
              <span v-if="!scope.row.show">{{ scope.row.predictEnd }}</span>
              <el-date-picker
                v-else
                v-model="changeRow.predictEnd"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="datetime"
                placeholder="选择日期"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.prop === 'userNames'"
            label="负责人"
            prop="userNames"
          >
            <template #default="scope">
              <span v-if="!scope.row.show">{{
                userNamesFilters(scope.row.userNames, selectList.userAll)
              }}</span>
              <el-select
                v-else
                multiple
                v-model="changeRow.userNames"
                placeholder="请选择负责人"
              >
                <el-option
                  v-for="item in selectList.userAll"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.prop === 'taskLevel'"
            label="优先级"
            prop="taskLevel"
          >
            <template #default="scope">
              <span v-if="!scope.row.show">
                {{ taskLevelFilters(scope.row.taskLevel) }}
              </span>
              <el-select
                v-else
                v-model="changeRow.taskLevel"
                placeholder="请选择优先级"
              >
                <el-option
                  v-for="item in levalList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.prop === 'status'"
            label="状态"
            prop="status"
          >
            <template #default="scope">
              <span v-if="!scope.row.show">
                {{ statusFilters(scope.row.status) }}
              </span>
              <el-select
                v-else
                v-model="changeRow.status"
                placeholder="请选择优先级"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </template>
      </template>
      <el-table-column fixed="right" label="操作" width="350">
        <template #default="scope">
          <el-button
            @click="confirmHandler(scope.$index, scope.row)"
            type="primary"
            size="mini"
            v-if="scope.row.show"
          >
            <span style="vertical-align: middle"> 保存 </span>
          </el-button>
          <el-button
            @click="scope.row.show = false"
            type="warning"
            size="mini"
            v-if="scope.row.show"
          >
            <span style="vertical-align: middle"> 取消 </span>
          </el-button>
          <el-button
            @click="addChildren(scope.$index, scope.row)"
            type="text"
            size="small"
          >
            <el-icon style="vertical-align: middle">
              <plus />
            </el-icon>
            <span style="vertical-align: middle"> 添加子项 </span>
          </el-button>
          <el-button
            @click="editHandler(scope.$index, scope.row)"
            type="text"
            size="small"
          >
            <el-icon style="vertical-align: middle">
              <edit />
            </el-icon>
            <span style="vertical-align: middle"> 编辑 </span>
          </el-button>

          <el-button
            @click="delHandler(scope.$index, scope.row)"
            type="text"
            size="small"
          >
            <el-icon style="vertical-align: middle">
              <delete />
            </el-icon>
            <span style="vertical-align: middle"> 删除 </span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Paging
      :size="$_size"
      :current="$_current"
      :total="$_total"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @search="search"
    />
    <myDrawer
      :drawer="drawer"
      @closeDrawer="closeDrawer"
      :title="title"
      @search="search"
      :tableId="tableId"
      :userAll="selectList.userAll"
      :projectAll="selectList.projectAll"
      :parentId="parentId"
    />
  </div>
</template>

<script setup>
import { ElMessageBox, ElMessage } from "element-plus";
import { computed, onMounted, reactive, ref, nextTick } from "vue";
import {
  columnsHandler,
  taskFunc,
  statusFilters,
  userNamesFilters,
  taskLevelFilters,
  projectFilter,
  statusList,
  levalList,
} from "./util";
import { Delete, Edit, Plus, RefreshRight } from "@element-plus/icons";
import myDrawer from "./components/drawer.vue";
import { getPage, remove, userAll, projectAll } from "/@/api/HxTask";
import Paging from "./../../components/Pagination/index.vue";
import paging from "/@/mixins/paging";
import { update } from "/@/api/HxTask";
let drawer = ref(false);
let { closeDrawer } = taskFunc(drawer);
let data = reactive({
  tableData: [],
});
let title = ref("");
let {
  $_size,
  $_total,
  $_current,
  handleSizeChange,
  handleCurrentChange,
  $_loading,
} = paging(search);
// cell - click
let columns = columnsHandler();
let changeRow = reactive({
  childrenList: [],
  userNames: "",
  taskLevel: "",
  status: "",
  predictStart: "",
  predictEnd: "",
  title: "",
  projectId: "",
});
function cellClick(row, column, cell, event) {
  let child = changeRow.childrenList.every((item) => item.show == false);
  let parent = data.tableData.every((item) => item.show == false);
  if (!child || !parent) {
    // ElMessage.warning("有修改项尚未保存");
    return;
  }
  row.show = true;
  changeRow.taskLevel = row.taskLevel;
  changeRow.userNames = row.userNames.split(",").map(Number);
  changeRow.status = row.status.toString();
  changeRow.predictStart = row.predictStart;
  changeRow.predictEnd = row.predictEnd;
  changeRow.title = row.title;
  changeRow.projectId = row.projectId;
}
async function confirmHandler(index, row) {
  changeRow.userNames = changeRow.userNames.join(",");
  let obj = Object.assign({ ...changeRow }, { id: row.id });
  let res = await update(obj);
  row.show = false;
  search();
}
//添加子项
let parentId = ref(null);
let addChildren = async (index, row) => {
  drawer.value = true;
  title.value = "新增子项";
  parentId.value = row.id;
};

let load = async (tree, treeNode, resolve) => {
  let res = await getPage({ parentId: tree.id });
  let { records } = res.data;
  records.forEach((item) => (item.show = false));
  changeRow.childrenList = records;
  resolve(records);
};
// 编辑
let tableId = ref(0);
let editHandler = async (index, row) => {
  drawer.value = true;
  title.value = "编辑";
  tableId.value = row.id;
};
// 新增
let addHandler = async () => {
  drawer.value = true;
  title.value = "新增";
};
// 删除
let delHandler = (index, row) => {
  console.log(row);
  ElMessageBox.confirm("删除该用户, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await remove(row.id);
      res.code == 200
        ? search()
        : ElMessage({
            type: "error",
            message: res.msg,
          });
    })
    .catch(() => {});
};
//  初始化请求获取数据
async function search() {
  $_loading.value = true;
  let res = await getPage({ size: $_size.value, current: $_current.value });
  let { records, total } = res.data;
  records.forEach((item) => {
    if (item.subTask > 0) {
      item.children = [];
      item.hasChildren = true;
    }
    item.show = false;
  });
  data.tableData = records;
  $_total.value = total;
  $_loading.value = false;
}
search();
// 获取所有user
let selectList = reactive({
  userAll: [],
  projectAll: [],
});
async function getUserAll() {
  let res = await userAll();
  let { data } = res;
  selectList.userAll = data;
}
getUserAll();
async function getProjectAll() {
  let res = await projectAll();
  let { data } = res;
  selectList.projectAll = data;
}
getProjectAll();
</script>
<style lang="scss" scoped>
$bg: #ffffff;
.task-box {
  width: 100%;
  min-height: calc(100vh - 120px);
  background: $bg;
  box-sizing: border-box;
  padding: 15px;
  .btn {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
  }
}
</style>